<nz-layout class="channel-panel">
  <div class="l-group">
    <nz-input [nzType]="'search'" [nzPlaceHolder]="'输入渠道名称'" [(ngModel)]="_value" style="width: 200px;" (nzOnSearch)="onSearch($event)"></nz-input>

    <!-- 操作 -->
    <div class="l-operate" style="float:right;">
      <nz-avatar nz-tooltip="添加" [nzShape]="'square'" [nzIcon]="'plus-square-o'" *authority="['channel/list/3']" (click)="showModal('create', '')"></nz-avatar>
      <nz-avatar nz-tooltip="删除" [nzShape]="'square'" [nzIcon]="'delete'" *authority="['channel/list/4']" (click)="delete('')"></nz-avatar>
      <nz-avatar nz-tooltip="刷新" [nzShape]="'square'" [nzIcon]="'sync'" (click)="update()"></nz-avatar>
    </div>
  </div>
  <!-- 
    (nzDataChange)="_displayDataChange($event)"
  -->
  <div class="l-group">
    <nz-table #nzTable [nzAjaxData]="data"
      [nzLoading]="_loading"
      [nzTotal]="channel.totalPages"
      [(nzPageIndex)]="channel.pageNumber"
      [(nzPageSize)]="channel.pageSize"
      (nzPageIndexChange)="_refreshStatus(true)"
      (nzPageSizeChange)="_refreshStatus(true)"
      nzBordered nzShowSizeChanger>
      <thead nz-thead>
        <tr>
          <th nz-th nzCheckbox>
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
            </label>
          </th>
          <th nz-th>
            <span>渠道名称</span>
          </th>
          <th nz-th>
            <span>排序</span>
          </th>
          <th nz-th>
            <span>操作</span>
          </th>
        </tr>
      </thead>
      <tbody nz-tbody class="channel-panel-body">

        <ng-template ngFor let-data [ngForOf]="nzTable.data">
          <ng-template ngFor let-item [ngForOf]="expandDataCache[data.id]">
            <tr nz-tbody-tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
              <td nz-td nzCheckbox>
                <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="_checkedInput(item, data)">
                </label>
              </td>
              <td nz-td [ngClass]="{ 'lv-one': !item.parent && !item.children ,'lv-two': item.parent, 'lv-two-l': item.parent && !item.children && item.parent.parent }">
                <nz-row-indent [nzIndentSize]="item.level"></nz-row-indent>
                <nz-row-expand-icon [(nzExpand)]="item.expand"
                    (nzExpandChange)="collapse(expandDataCache[data.id],item,$event)"
                    [nzShowExpand]="!!item.children"></nz-row-expand-icon>
                {{ item.name }}
              </td>
              <td nz-td>{{ item.order }}</td>
              <td nz-td>
                <nz-dropdown [nzPlacement]="'bottomRight'">
                  <a class="ant-dropdown-link" nz-dropdown>
                    <i class="anticon anticon-ellipsis"></i>
                  </a>
                  <ul nz-menu>
                    <li nz-menu-item *authority="['channel/list/2']">
                      <a (click)="showModal('update', item)">编辑</a>
                    </li>
                    <li nz-menu-item *authority="['channel/list/4']">
                      <a (click)="delete(item)">删除</a>
                    </li>
                  </ul>
                </nz-dropdown>
              </td>
            </tr>
          </ng-template>
        </ng-template>

      </tbody>
    </nz-table>
  </div>

  <!-- alert -->
  <nz-modal [nzVisible]="isVisible" [nzTitle]="'添加渠道'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
    <ng-template #modalContent>
      <div class="l-group">
        <form nz-form [nzLayout]="validateForm.controls?.formLayout?.value" [formGroup]="validateForm" (ngSubmit)="submitForm()">

          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="8">
              <label nz-form-item-required>渠道名称</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="10">
              <nz-input formControlName="materialName" [(ngModel)]="channelAlert.name" [nzSize]="'large'" (ngModelChange)="changeName(channelAlert)">
              </nz-input>
              <div *ngIf="channelAlert.nameErr" style="color:red;">渠道的名称，最多支持20个字符</div>
            </div>
          </div>

          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="8">
              <label>上级渠道</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="10">
              <!-- <nz-select
                formControlName="dosageSelect"
                style="width: 200px;"
                nzAllowClear
                [nzPlaceHolder]="'请选择'"
                (ngModelChange)="_console($event)"
                [(ngModel)]="_options"
                nzShowSearch>
                <nz-option
                  *ngFor="let option of channelAlert.data"
                  [nzLabel]="option.name"
                  [nzValue]="option.id"
                  [nzDisabled]="option.disabled">
                </nz-option>
              </nz-select> -->
              <!-- 级联选择 -->
              <nz-cascader
                formControlName="dosageSelect"
                nzChangeOnSelect
                [nzAllowClear]="false"
                [nzPlaceHolder]="'请选择'"
                [nzValueProperty]="'id'"
                [nzLabelProperty]="'name'"
                [nzChangeOnSelect]="true"
                [nzOptions]="channelAlert.data"
                [(ngModel)]="_options"
                (nzSelect)="_console($event)">
              </nz-cascader>
            </div>
          </div>

          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="8">
              <label>排序</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="10">
              <nz-input formControlName="materialOrder" [(ngModel)]="channelAlert.order" [nzSize]="'large'">
              </nz-input>
            </div>
          </div>

          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="8">
              <label>图片</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="12">
              <nz-upload
                nzListType="picture-card"
                nzAction="{{fileUrl}}"
                [nzAccept]="'image/*'"
                [nzMultiple]="true"
                [nzLimit] = "1"
                (nzChange)="upload($event)"
                [(nzFileList)]="fileList"
                [nzShowButton]="fileList.length < 1"
                [nzPreview]="handlePreview">
                  <i class="anticon anticon-plus"></i>
              </nz-upload>
              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
                <ng-template #modalContent>
                  <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
                </ng-template>
              </nz-modal>
            </div>
          </div>

        </form>
      </div>
    </ng-template>
  </nz-modal>

</nz-layout>
